<template>
	<view class="max-background">
		<view class="my-con">
			<uni-forms class="myform" ref="valiForm" :rules="customRules" :model="tsEnterpriseCertification" labelWidth="80px">
				
				<uni-forms-item class="myitem" label="企业名称" required name="enterpriseName">
					<uni-easyinput
						focus 
						class="uni-mt-5" 
						trim="both"  
						v-model="tsEnterpriseCertification.enterpriseName" 
						placeholder="请输入企业名称" >
					</uni-easyinput>
				</uni-forms-item>
				
				<uni-forms-item class="myitem" label="注册手机" required name="registerPhone">
					<uni-easyinput
						type="number"
						class="uni-mt-5" 
						trim="both"  
						v-model="tsEnterpriseCertification.registerPhone" 
						placeholder="请输入注册手机" >
					</uni-easyinput>
				</uni-forms-item>
				
				<uni-forms-item class="myitem" label="法人姓名" required name="legalPerson">
					<uni-easyinput
						
						class="uni-mt-5" 
						trim="both"  
						v-model="tsEnterpriseCertification.legalPerson" 
						placeholder="请输入法人姓名" >
					</uni-easyinput>
				</uni-forms-item>
				
				<uni-forms-item class="myitem" label="信用代码" required name="creditCode">
					<uni-easyinput
						
						class="uni-mt-5" 
						trim="both"  
						v-model="tsEnterpriseCertification.creditCode" 
						placeholder="请输入信用代码" >
					</uni-easyinput>
				</uni-forms-item>
				
				<uni-forms-item class="myitem" label="营业企业" required name="businessEnterprise">
					<uni-easyinput
						
						class="uni-mt-5" 
						trim="both"  
						v-model="tsEnterpriseCertification.businessEnterprise" 
						placeholder="请输入营业企业" >
					</uni-easyinput>
				</uni-forms-item>
				
				<uni-forms-item class="myitem" label="企业所在地" required name="location">
					<uni-easyinput
						
						class="uni-mt-5" 
						trim="both"  
						v-model="tsEnterpriseCertification.location" 
						placeholder="请输入企业所在地" >
					</uni-easyinput>
				</uni-forms-item>
				
				<uni-forms-item class="myitem" label="法人身份证" required name="idCard">
					<view class="myinput">
						<uni-file-picker
						file-mediatype="image" 
						limit="2" 
						file-extname="png,jpg"
						title=""
						:auto-upload="false"
						@select="uploadId"></uni-file-picker>
					</view>
				</uni-forms-item>
				
				<uni-forms-item class="myitem" label="营业执照" required name="businessLicense">
					<view class="myinput">
						<uni-file-picker
						file-mediatype="image" 
						limit="1" 
						file-extname="png,jpg"
						title=""
						:auto-upload="false"
						@select="upload"
						></uni-file-picker>
					</view>
			
				</uni-forms-item>
				
			</uni-forms>
			<button class="mybottom" type="primary" @click="submit('valiForm')">提交</button>
			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="通知" content="请上传法人身份证和营业执照!" 
						></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	
		<!-- <uni-easyinput  v-model="value"  placeholder="请输入内容" @input="input"></uni-easyinput> -->
		<!-- <view class="myitem">
			<view class="mytext">
				<text class="uni-subtitle">企业名称</text>
			</view>
			<view class="myinput">
				<uni-easyinput 
				focus class="uni-mt-5" trim="both"  v-model="value" placeholder="请输入企业名称" >
				</uni-easyinput>
			</view>
			
		</view>
		<view class="myitem">
			<view class="mytext">
				<text class="uni-subtitle">注册手机</text>
			</view>
			<view class="myinput">
				<uni-easyinput  type="number" class="uni-mt-5" trim="both" v-model="tsEnterpriseCertificationrenzheng.phone" placeholder="请输入注册手机" >
				</uni-easyinput>
			</view>
		</view>
		<view class="myitem">
			<view class="mytext">
				<text class="uni-subtitle">法人姓名</text>
			</view>
			<view class="myinput">
				<uni-easyinput  class="uni-mt-5" trim="both" v-model="tsEnterpriseCertificationrenzheng.faren" placeholder="请输入法人姓名" >
				</uni-easyinput>
			</view>
		</view>
		
		<view class="myitem">
			<view class="mytext">
				<text class="uni-subtitle">信用代码</text>
			</view>
			<view class="myinput">
				<uni-easyinput  class="uni-mt-5" trim="both" v-model="tsEnterpriseCertificationrenzheng.xinyong" placeholder="请输入信用代码" >
				</uni-easyinput>
			</view>
		</view>
		<view class="myitem">
			<view class="mytext">
				<text class="uni-subtitle">营业企业</text>
			</view>
			<view class="myinput">
				<uni-easyinput  class="uni-mt-5" trim="both" v-model="tsEnterpriseCertificationrenzheng.qiye" placeholder="请输入营业企业" >
				</uni-easyinput>
			</view>
		</view>
		<view class="myitem">
			<view class="mytext">
				<text class="uni-subtitle">企业所在地</text>
			</view>
			<view class="myinput">
				<uni-easyinput  class="uni-mt-5" trim="both" v-model="tsEnterpriseCertificationrenzheng.suozai" placeholder="请输入企业所在地" >
				</uni-easyinput>
			</view>
		</view>
		
		<view class="myitem">
			<view class="mytext1">
				<text class="uni-subtitle">法人身份证</text>
			</view>
			<view class="myinput">
				<uni-file-picker
				file-mediatype="image" 
				limit="2" 
				file-extname="png,jpg"
				title=""
				:auto-upload="false"
				@select="uploadId"></uni-file-picker>
			</view>
			
		</view>
		
		<view class="myitem">
			<view class="mytext1">
				<text class="uni-subtitle">营业执照</text>
			</view>
			<view class="myinput">
				<uni-file-picker
				file-mediatype="image" 
				limit="2" 
				file-extname="png,jpg"
				title=""
				:auto-upload="false"
				@select="upload"
				></uni-file-picker>
			</view>
		</view>
		
		<view class="mybottom">
			<button class="button" type="primary" @click='uploadInfo'>提交审核</button>
		</view> -->
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'error',
				
				tsEnterpriseCertification:{
					enterpriseName:'', //企业名称
					registerPhone:'',  //注册手机
					legalPerson:'',  //法人
					creditCode:'',  //信用代码
					businessEnterprise:'',  // 营业企业
					location:'',  //企业所在地
					idCardFront:'', // 身份证正面
					idCardOpposite:'',  //身份证反面
					businessLicense:'',  //营业执照
					idCard:[]
				},
				list:[],
				customRules: {
					enterpriseName: {
						rules: [{
							required: true,
							errorMessage: '企业名称不能为空'
						}]
					},
					
					registerPhone: {
						rules: [{
							required: true,
							errorMessage: '注册手机号不能为空'
						},
						{
							format: 'number',
							errorMessage: '手机号只能输入数字'
						},
						{
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = (
									/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
								); //手机号码
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
							}
						}]
					},
					creditCode: {
						rules: [{
							required: true,
							errorMessage: '信用代码不能为空'
						}]
					},
					businessEnterprise: {
						rules: [{
							required: true,
							errorMessage: '营业企业不能为空'
						}]
					},
					location: {
						rules: [{
							required: true,
							errorMessage: '企业所在地不能为空'
						}]
					}
					
				}
			}
			
		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			async insert(tsEnterpriseCertification){  // 添加
				const result = await uni.$http.post("localhost:8090/tsEnterpriseCertification/insert",tsEnterpriseCertification);
				const {
					code,
					message
				} = result.data
				if(code==0){
					uni.showToast({
						title: "管理员正在审核中,请耐心等待！",
						icon: 'none',
						duration: 1000
					});
					setTimeout(()=>{
						uni.switchTab({  // uniapp跳转页面  保留当前页面  就是覆盖当前页面
							url:'/pages/myinfo/myinfo'  
						})
					},1600)
				}else if(code == 4005){
					uni.showToast({
						title: "请重新填写信息",
						icon: 'none',
						duration: 1000
					});
				}
			},
			
			submit(ref) {   // 15535803574
	
				if(this.tsEnterpriseCertification.idCard.length >=2){
					this.tsEnterpriseCertification.idCardFront = this.tsEnterpriseCertification.idCard[0]
					this.tsEnterpriseCertification.idCardOpposite = this.tsEnterpriseCertification.idCard[1]
					this.$refs[ref].validate().then(res => {
					
						this.insert(this.tsEnterpriseCertification)

					}).catch(err => {
						console.log('err', err);
					})
				}else{
					this.$refs.alertDialog.open()
				}
			},
			
			
			//身份证上传
			uploadId(e){
				let tiemr = new Date();
				let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr
					.getDate();
				address = 'zskp/userHead/' + address + '/';
				var tempFilePaths = e.tempFilePaths[0];
				let str = e.tempFilePaths[0].substr(e.tempFilePaths[0].lastIndexOf('.'));
				let nameStr = address + tiemr.getTime() + str;
				let ossUrl = 'http://localhost:8090/upload/imgUpload';
				uni.uploadFile({
					url: ossUrl, //输入你的bucketname.endpoint
					filePath: tempFilePaths,
					fileType: 'image',
					name: 'file',
					formData: {
						name: nameStr,
						key: nameStr,
						policy: 'eyJleHBpcmF0aW9uIjoiMjAyMy0wNi0yNlQwMjoyMjozOS4yMjJaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIyMDIzLTA2LTI2LyJdXX0=', // 输入你获取的的policy
						OSSAccessKeyId: 'LTAI5tJsR6uZnmEUoa4c5hzH', // 输入你的AccessKeyId
						success_action_status: '200', // 让服务端返回200,不然，默认会返回204
						signature: 'isMKvr1Wrwnd1zSpo/cgvCPKSNY=' // 输入你获取的的signature
					},
					success: res => {
						if (res.statusCode == '200') {
							const data = JSON.parse(res.data)
							console.log(data.data.uploadImg);
							this.tsEnterpriseCertification.idCard.push(data.data.uploadImg)
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 1000
							})
						}
					}
				})
			},
			//执照上传
			upload(e){
				let tiemr = new Date();
				let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr
					.getDate();
				address = 'zskp/userHead/' + address + '/';
				var tempFilePaths = e.tempFilePaths[0];
				let str = e.tempFilePaths[0].substr(e.tempFilePaths[0].lastIndexOf('.'));
				let nameStr = address + tiemr.getTime() + str;
				let ossUrl = 'http://localhost:8090/upload/imgUpload';
				uni.uploadFile({
					url: ossUrl, //输入你的bucketname.endpoint
					filePath: tempFilePaths,
					fileType: 'image',
					name: 'file',
					formData: {
						name: nameStr,
						key: nameStr,
						policy: 'eyJleHBpcmF0aW9uIjoiMjAyMy0wNi0yNlQwMjoyMjozOS4yMjJaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIyMDIzLTA2LTI2LyJdXX0=', // 输入你获取的的policy
						OSSAccessKeyId: 'LTAI5tJsR6uZnmEUoa4c5hzH', // 输入你的AccessKeyId
						success_action_status: '200', // 让服务端返回200,不然，默认会返回204
						signature: 'isMKvr1Wrwnd1zSpo/cgvCPKSNY=' // 输入你获取的的signature
					},
					success: res => {
						if (res.statusCode == '200') {
							const data = JSON.parse(res.data)
							console.log(data.data.uploadImg);
							this.list.push(data.data.uploadImg)
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 1000
							})
						}
					}
				})

			}
		}
	}
</script>



<style>
	/* 最大容器 */
	.main {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: Snow;
	}

	/* 头部容器 */
	.header {
		width: 100%;
		height: 100rpx;
		margin-bottom: -10px;
	}

	/* 中间容器 */
	.container {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-content: space-evenly;
		width: 100%;
		height: 686px;
		overflow-y: scroll;
	}

	.c-zi {
		width: 95%;
		/* flex: 1; */
		margin: 0px auto;
		margin-bottom: -22px;
	}

	.yizhang {
		display: flex;
		width: 50%;
		height: 120px;
		margin: 0 5px;
	}

	.liangzhang {
		display: flex;
		width: 100%;
		height: 120px;
	}

	/* 底部容器 */
	.bottom {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 下一步按钮样式 */
	.button-style {
		margin: 0 auto;
		width: 80%;
		border-radius: 35px;
	}

	.aaa {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		background-color: whitesmoke;
		padding: 10px;
		margin: 0 5px;
	}

	.bbb {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		background-color: whitesmoke;
	}
</style>